<template>
  <div class="answer-box">
    <!--<img src="../../public/jinx.jpg" c width="50px" height="50px" alt="">-->
    <div class="avatar">
      <img :src="getImgURL(comment.img)" alt="">
    </div>
    <div class="content">
        <div class="name">{{ comment.username }}</div>
      <p>{{ comment.content }}</p>
      <p style="font-weight: lighter;font-size: small;margin-top: 10px"><span>评论时间:{{LocalTime(comment.createTime)}}</span></p>
    </div>
  </div>
</template>

<script>
import LocalTime from "@/timeZone/index.js";
export default {
  name: "Answer",
  props: ['comment'],
  methods: {
    getImgURL(url){
      return 'http://localhost:8888/FinancialRecommend' + url
    },
    LocalTime(time){
      return LocalTime(time)
    }
  }
}
</script>

<style lang="less" scoped>
.answer-box {
  width: 100%;
  min-height: 100px;
  margin: 10px 0;
  display: flex;
  box-shadow:  0 2px 4px rgba(0, 0, 0, .12);
  transition: box-shadow 0.3s ease;
  * {
    margin: 0 0;
    padding: 0 0;
  }
  .avatar {
    width: 100px;
    height: 100px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 100%;
      margin: 25px;
    }
  }
  .name{
    margin-top: 25px;
    margin-bottom: 10px;
  }
}
.answer-box:hover{
  box-shadow:  0 2px 20px 6px rgba(0, 0, 0, 0.12);
}
</style>
